package myJs

import myJs.cps.{PureInputCp, Style, TextAlign}
import myJs.myPkg.{MyFetch, ReactRouterDOM}
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks._
import slinky.web.html._

import scala.scalajs.js
import scala.scalajs.js.JSON
import scala.concurrent.ExecutionContext.Implicits.global
import myJs.Implicits._
import org.scalajs.dom.window.localStorage

/**
 * Created by yz on 22/4/2022
 */
@react object LoginCp {

  type Props = Unit

  private val css = List(
    assets.ComponentsCss,
    assets.LoginCss,
    assets.BootstrapMinCss,
    assets.MyCss)

  val component = FunctionalComponent[Props] { props =>

    val navigate = ReactRouterDOM.useNavigate()
    val location = ReactRouterDOM.useLocation()

    val (account, setAccount) = useState("")
    val (password, setPassword) = useState("")
    val (info, setInfo) = useState("")

    object FTool {

      def login = () => {
        val dict = js.Dictionary(
          "account" -> account,
          "password" -> password,
        )
        val url = "http://localhost:9000/panda/loginApi"
        MyFetch.post(url = s"${url}", data = JSON.stringify(dict), headers = Map("Content-Type" -> "application/json"),
        ).map { any =>
          val valid = any.toJDJAn("valid").toB
          if (valid) {
            localStorage.setItem("account", account)
            val role = any.toJDJAn.myGet("role")
            localStorage.setItem("role", role)
            role match {
              case "admin" => navigate("/admin/memberManage")
              case "member" => navigate("/member/produceQrcode")
            }

          } else {
            setInfo("用户名或密码错误！")
          }
        }
        ()
      }


      def passwordChange = (v: String) => {
        setPassword(v)
      }

      def accountChange = (v: String) => {
        setAccount(v)
      }

    }

    useEffect(() => {
      if (location.state != null) {
        val message = location.state.toJDJAn.myGet("message")
        setInfo(message)
      }
    }
    )


    div(className := "login",

      div(className := "logo",
        div(style := Style(textAlign = TextAlign.center),
          h2(style := Style(textAlign = TextAlign.center, fontSize = "25px", color = "#0D2451"),
            img(style := Style(height = "50px"), src := (assets.PandaLogo1Png.asInstanceOf[String])),
            " 样本管理系统"
          )
        )
      ),

      div(className := "content",
        form(className := "login-form",
          h3(className := "form-title", "登录"),

          span(style := Style(lineHeight = "35px"), className := "error", info),

          div(className := "form-group",
            label(className := "control-label visible-ie8 visible-ie9", "用户名"),
            PureInputCp(placeHolder = "用户名", value = account, onChange = FTool.accountChange)
          ),
          div(className := "form-group",
            label(className := "control-label visible-ie8 visible-ie9", "密码"),
            PureInputCp(placeHolder = "密码", `type` = "password", value = password, onChange = FTool.passwordChange)
          ),
          div(className := "form-actions",
            button(style := Style(width = "100%", backgroundColor = "#0095e8", color = "#fff"),
              className := "btn uppercase", "登录", `type` := "button", onClick := FTool.login)
          )

        )
      ),

      div(className := "copyright",
        "版权所有2021 样品管理系统 All Rights Reserved"
      )

    )


  }

}
